<template>
  <div class="menu">
    <div class="menu-title">学生管理系统</div>
    <div class="menu-warper">
      <el-menu class="el-menu_diy"
               :default-active="activeMenu"
               background-color="#232649"
               text-color="#ffffff"
               active-text-color="#E71E60"
               @select="menuSelect">
        <el-menu-item index="curriculum">
          <img style="padding-right:10px;"
               src="@/assets/img/kebiao.png"
               alt="课表">
          <template #title>课表</template>
        </el-menu-item>
        <el-menu-item index="achievement">
          <img style="padding-right:10px;"
               src="@/assets/img/chengjibiao.png"
               alt="成绩表">
          <template #title>成绩表</template>
        </el-menu-item>
        <el-menu-item index="trend">
          <img style="padding-right:10px;"
               src="@/assets/img/chengjizoushi.png"
               alt="成绩走势">
          <template #title>成绩走势</template>
        </el-menu-item>
        <el-menu-item index="evaluate">
          <img style="padding-right:10px;"
               src="@/assets/img/pingjia.png"
               alt="评价">
          <template #title>评价</template>
        </el-menu-item>
        <el-menu-item index="setting">
          <img style="padding-right:10px;"
               src="@/assets/img/shezhi.png"
               alt="设置">
          <template #title>设置</template>
        </el-menu-item>
        <el-menu-item index="about">
          <img style="padding-right:10px;"
               src="@/assets/img/guanyu.png"
               alt="关于">
          <template #title>关于</template>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: 'homeMenu',
  props: {
    activeMenu: {
      type: String,
      default: 'welcome',
    }
  },
  data() {
    return {}
  },
  components: {},
  mounted() {},
  methods: {
    // 菜单选择
    menuSelect(val) {
      this.$router.push('/home/' + val)
      this.$emit('menuSelect', val)
    },
  },
}
</script>

<style lang="scss" scoped>
.menu {
  width: 200px;
  height: 100vh;
  background-color: #232649;
  .menu-title {
    height: 80px;
    padding: 0 20px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    line-height: 80px;
    border-right: solid 1px var(--el-menu-border-color);
  }
  .menu-warper {
    height: calc(100vh - 80px);
    overflow-y: auto;
    .el-menu_diy {
      height: 100%;
    }
  }
}
</style>